<template>
  <div class="foot">
    <div class="foot-nav">
    	<div @click="vfun_index" :class="{active:vue_index}">
    		<em class="iconfont">&#xe6a6;</em>
    		首页
    	</div>
    	<div @click="vfun_class" :class="{active:vue_class}">
    		<em class="iconfont">&#xe603;</em>
    		分类
    	</div>
    	<div @click="vfun_order" :class="{active:vue_orderB}">
    		<em class="iconfont">&#xe608;</em>
    		订单
    	</div>
    	<div @click="vfun_call" :class="{active:vue_call}">
    		<em class="iconfont badge">&#xe65d;<i v-show='vue_badge_num!=0'>{{vue_badge_num | badge}}</i></em>
    		购物车
    	</div>
    	<div @click="vfun_my" :class="{active:vue_my}">
    		<em class="iconfont">&#xe624;</em>
    		我的
    	</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
    	vue_badge_num:0,
      vue_index:false,
      vue_class:false,
      vue_order:false,
      vue_my:false,
      vue_call:false,
      vue_orderB:false,
    }
  },
  methods:{
  	vFun_badge_cart() {
		if (localStorage.getItem("memberCode") != null) { //只有登录之后，才查询
			this.axios({
	  			method:"POST",
	  			url:"/v3/sale/cartGoodss/listAll",
	  			data:{}
	  		}).then((res)=>{
	  			this.vue_badge_num=res.data.list.reduce((countNum,item)=>{
	  				return countNum+item.goodsBuyNum
	  			},0)
	  		}).catch((err)=>{
	  			//console.log(err.response.data)
	  		})
		}else{
    }
	},
  	vfun_index(){
      this.$router.push({path:"/index"})
  	},
  	vfun_class(){
      this.$router.push({path:"/goodsCategory"})
  	},
  	vfun_order(){
      if(localStorage.getItem("memberCode") == null){
        this.$router.push({path:"/landing"})
      }else {
        localStorage.removeItem("orderName");
        this.$router.push({path:"/orderList"})
      }

  	},
  	vfun_call(){
      if(localStorage.getItem("memberCode") == null){
        this.$router.push({path:"/landing"})
      }else {
        this.$router.push({path:"/shopingCart"})
      }
  	},
  	vfun_my(){
  		this.$router.push({path:"/my"})
  	},
  },
  filters:{
			badge:function(val){
				return val>99?'99+':val;
			}
		},
		activated(){
			this.vFun_badge_cart();  //请求badge数据
		  	if (this.$route.name=='index') {
		  		this.vue_index=true;
		  	};
		  	if (this.$route.name=='goodsCategory') {
		  		this.vue_class=true;
		  	};
        if (this.$route.path=='/orderList') {
          this.vue_orderB=true;
        };
        if (this.$route.name=='shopingCart') {
          this.vue_call=true;
        };
		  	if (this.$route.name=='my') {
		  		this.vue_my=true;
		  	};

		},
  mounted(){
  	this.vFun_badge_cart();  //请求badge数据
  	if (this.$route.name=='index') {
  		this.vue_index=true;
  	};
  	if (this.$route.name=='goodsCategory') {
  		this.vue_class=true;
  	};
  	if (this.$route.name=='my') {
  		this.vue_my=true;
  	};
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}



.active{
	color: #D50B0A;
}
.active em{
	color: #D50B0A;
}
.foot{
	position: fixed;
	bottom: 0;
	height: 1.6rem;
	width: 100%;
	color: #888;
	z-index: 100;
	box-shadow: 3px 0px 5px #ccc;
	background: #fff;
	padding-top: 0.1rem;
}
.foot-nav{
	display: -webkit-box;
}
.foot-nav div{
	-webkit-box-flex: 1;
	text-align: center;
	font-size: 14px;
}
.foot-nav div em{
	font-size: 22px;
	display: block;
}
/* start 徽章 */

	.badge {
		position: relative;
	}

	.badge>i {
		position: absolute;
		top: 0rem;
		right: .5rem;
		padding: 2px 4px;
		background: red;
		border-radius: 3px;
		font-size: 0.2rem;
		line-height: 1;
		color: #fff;
	}
	/* end 徽章 */
</style>
